# BrickMaster Toys — Project Knowledge Base
**Project:** brickmaster website
**Goal:** Replace the existing Shopify store at brickmastertoys.co.uk with this standalone HTML project hosted on Netlify
**Live site:** https://brickmastertoys.co.uk ✅ **LIVE**
**Original deadline:** 14 July 2026 — met early
**Last updated:** 10 July 2026

---

## Current Status: LIVE

**brickmastertoys.co.uk is deployed and working.** Domain DNS points to Netlify. Shopify Storefront API is wired in for real cart + checkout. Contact form uses Netlify Forms.

### Deployment history (this session)
1. Deployed `BrickMaster-Netlify.zip` to Netlify via manual drag-and-drop → got `*.netlify.app` URL
2. Added custom domain `brickmastertoys.co.uk` in Netlify → Netlify recommended their DNS (nameserver) setup over A-record (GoDaddy doesn't support ALIAS/ANAME)
3. User went to GoDaddy → Nameservers → "Enter my own nameservers" → entered Netlify's 4 nameservers (`dns1-4.p09.nsone.net`)
4. First attempt silently failed to save — GoDaddy still showed "Using default nameservers" 24 hours later. Re-did the change, confirmed it stuck this time.
5. DNS propagated within the hour after the real fix. **Site confirmed live by user.**

### GitHub — connected, read-only
GitHub account is connected, but the available tools are **read/copy only** (list repos, read files, copy files into this project). There is no push/deploy tool. Auto-deploy via GitHub → Netlify requires the user to manually:
1. Create a repo on github.com
2. Upload/push the project files themselves (e.g. via GitHub's web upload, or git from their machine)
3. Netlify → Add new site → Import from Git → link the repo → enable auto-deploy on push
This has been explained to the user; not yet completed as of last update. Manual re-zip-and-drag-drop to Netlify remains the fallback deploy method until then.

### Downloading the project
`present_fs_item_for_download` has been unreliable for the user (download button not working). If this recurs, fall back to `get_public_file_url` on a zipped/bundled file, or retry `present_fs_item_for_download` once more — no root cause identified yet.

---

## New This Session: Individual Product Pages

Added `product.html` — a dedicated page per product (`product.html?id=p1` etc.), linked from:
- Main "Featured Right Now" grid (image + name + description now link through)
- "Trending Now" hero reel cards (image + name link through)

**Layout:**
- Header: logo only, enlarged (52px), no back-link (moved off header)
- Thumbnail column (left, 72px) — shows the product's own image angles
- Main image (center) with a **floating "← Back to shop" pill button** positioned above the image, not overlapping it
- Info column (right) — badge, category, name, description, price, Add to cart, meta, free shipping note
- **"Similar products" section** below the fold — same-category products, excludes current product, each with quick-add

**Known limitation:** Products with multiple photos on Shopify only show one image here. Attempted to fetch additional images live via Shopify Storefront GraphQL API (`images` field on `ProductVariant.product`) — **the current Storefront API token (`21bea171f3c154c821d36e9fec7e6bca`) is unauthorized for product/image reads** (confirmed via direct fetch test — `UNAUTHORIZED` error). Token currently only has cart mutation scope.

**Fix needed (not yet done):** In Shopify Admin → Settings → Apps and sales channels → Develop apps → the Storefront API app → enable scopes `unauthenticated_read_product_listings` and `unauthenticated_read_product_media`. Once enabled, the existing fetch code in `product.html` will start pulling all product images automatically (no code change needed). Alternative if user doesn't want to touch Shopify admin: manually upload extra photos and hardcode them into each product's `images[]` array in `product.html`.

Product data (`id`, `variantId`, `name`, `cat`, `catLabel`, `price`, `badge`, `desc`, `images[]`) is currently **duplicated** between `Brick Master Toys.html` and `product.html` — if products change, both files need updating.

### Other fixes this session
- Hero "Featured Build" showcase had mismatched copy — title said "Millennium Falcon / 7,541 pieces" but image (`prod1.webp`) was actually the MOC La Voiture Noire. Fixed title/piece-count to match the image.
- `About Us.html` — removed the physical address block (Quarndon, Derby) and the "We're based in Quarndon, Derby" line per user request. Contact card now just shows the email.

---

## Deployment Plan (reference)

**Host: Netlify (free tier)**
1. netlify.com → "Add new site → Deploy manually" → drag zip
2. Site settings → Domain management → Add custom domain → `brickmastertoys.co.uk`
3. Netlify DNS method used (not A-record): GoDaddy nameservers changed to Netlify's 4 nameservers
4. Shopify checkout continues via redirect to Shopify's hosted payment page

**Why Netlify over Shopify theme:** Shopify theme export (`shopify-theme/` + `BrickMaster-Theme.zip`) was attempted and abandoned — needed extensive Shopify Admin config, CSS wasn't loading correctly.

**Why Netlify over GitHub Pages:** Netlify Forms works natively for the contact form; GitHub Pages would need EmailJS.

---

## Shopify Storefront API

- **Store (working token target):** `xyudz1-vb.myshopify.com` — confirmed this is the domain the token authenticates against for cart operations
- **Note:** `brickmastertoys.myshopify.com` (mentioned in earlier docs) returns `Failed to fetch` from this environment — likely CORS/sandbox restriction, not necessarily wrong domain. Cart/checkout flows use `xyudz1-vb.myshopify.com` successfully.
- **Token:** `21bea171f3c154c821d36e9fec7e6bca` — cart mutation scope confirmed working; product/image read scope NOT enabled (see Known Remaining Gaps)
- **Usage:** Cart add/remove, quantity updates, checkout redirect all call the Storefront API
- **Checkout:** Clicking "Checkout →" in the cart drawer redirects to Shopify's hosted checkout page (real Klarna/PayPal/card payments)

---

## File Structure

```
Brick Master Toys.html          ← Main storefront (PRIMARY FILE)
product.html                    ← NEW — individual product detail pages (?id=p1..p8)
category.html                   ← Category listing page
Refund Policy.html              ← Policy page (scraped from live Shopify store)
Terms of Service.html           ← Policy page (scraped from live Shopify store)
Privacy Policy.html             ← Policy page (scraped from live Shopify store)
Shipping Policy.html            ← Policy page (created)
Contact Support.html            ← Netlify Forms contact form → sales@brickmastertoys.co.uk
About Us.html                   ← Placeholder content, address removed this session
Klarna FAQs.html                ← Created (placeholder content)
Returns and Exchanges.html      ← Created (note: & replaced with 'and' in filename)
Returns & Exchanges.html        ← duplicate with & in name (keep both for link compatibility)
tweaks-panel.jsx                ← Shared React tweaks panel component
netlify.toml                    ← Netlify config (publish dir = ".", redirect rules)
BrickMaster-Netlify.zip         ← Deployed zip (may be stale — re-zip before next deploy if files changed)
BrickMaster-Theme.zip           ← Shopify theme export (abandoned — use Netlify instead)
shopify-theme/                  ← Shopify theme source files (abandoned)
assets/
  logo.png                      ← BrickMaster Toys logo (used on all pages)
  prod1.webp – prod8.webp/.jpg  ← Product images (see product list below)
CLAUDE.md                       ← This file
```

---

## Design System

- **Fonts:** `Archivo Black` (headings), `Space Grotesk` (body), `JetBrains Mono` (labels/mono)
- **Colours:** cream `#FFFCF4`, sky blue `#1FB8E9`, navy `#0E3A5F`, yellow `#FFD83D`, red `#EC2F3E`, green `#62C24A`, pink `#FF9CC3`
- **Style:** neo-brutalist — thick navy borders, offset box-shadows, bold chunky type
- **CSS:** All values driven by CSS custom properties on `:root`
- **Link colours:** always define `a` and `a:hover` from palette — never browser-default blue

---

## Current Product Catalog (used in both storefront + product.html)

1. **La Voiture Noire Supercar** (p1) — £235 — Super Cars — `assets/prod1.webp` — hero "Featured Build"
2. **MOC SVJ Sports Car** (p2) — £200 — Super Cars — `assets/prod2.webp`
3. **BE@RBRICK Great Wave 400%** (p3) — £60 — Collectibles — `assets/prod3.webp`
4. **BE@RBRICK Sakura Red 400%** (p4) — £75 — Collectibles — `assets/prod4.webp`
5. **BE@RBRICK Banksy 400%** (p5) — £70 — Collectibles — `assets/prod5.webp`
6. **Raging Wolf PVC Figure** (p6) — £39.37 — Figures — `assets/prod6.webp`
7. **Hollow Knight GK Statue** (p7) — £45 — Figures — `assets/prod7.webp`
8. **Mercedes-AMG F1 W14 MOC** (p8) — £55 — Super Cars — `assets/prod8.webp`

Each has a Shopify `variantId` used for cart/checkout — see `product.html` source for exact values.

---

## Page-by-Page Reference

### `Brick Master Toys.html` — Main Storefront
- Top promo strip: Track order modal, Help mailto, Currency picker (persists `bm_cur`), Language picker (Claude API translation, cached `i18n_{code}`)
- Header: logo, Shop dropdown (9 categories → `#cats`), Sale (⚠️ no destination), live search, cart button
- Hero: "Shop the drop", "Browse all collections", "🎲 Surprise me", Friday Drop countdown, **Trending Now reel — now links each card to `product.html?id=`**
- Latest Collections (`#cats`) — 8 category cards, "View all 9 →" has no destination
- Featured Right Now (`#featured`) — filter chips, product grid — **cards now link to `product.html?id=`**
- Cart Drawer — Shopify Storefront API add/remove/qty, checkout redirect
- Track Order Modal — collects email + tracking ID, copies to clipboard, opens Evri
- Tweaks Panel (React) — Personality, Brand colour, Corners
- Footer — category links all → `#cats` (no individual pages), social icons still `href="#"`, Collector Rewards / Wholesale Enquiries still broken

### `product.html` — NEW Product Detail Page
- URL pattern: `product.html?id=p1` through `p8`
- Floating back button above image, thumbnail strip (own images only — see Known Limitation above), Similar Products grid (same category)
- Same cart drawer/Shopify checkout logic duplicated from main store

### Other pages — unchanged from prior session
See git history / prior versions for Contact Support, Refund Policy, Terms of Service, Privacy Policy, Shipping Policy, About Us (address removed), Klarna FAQs, Returns and Exchanges — all still linked correctly from footer.

---

## Tech Stack

- **HTML/CSS/JS** — vanilla, no build tools, no npm
- **React 18.3.1 + Babel 7.29.0** — CDN only, used for Tweaks panel
- **Shopify Storefront API** — cart + checkout (GraphQL fetch calls)
- **Netlify Forms** — contact form submission
- **Google Fonts** — Archivo Black, Space Grotesk, JetBrains Mono
- **No bundler** — open any HTML file directly in browser or deploy to Netlify
- **GitHub** — connected, read-only access from this environment; no auto-deploy pipeline set up yet

---

## Known Remaining Gaps

| Item | Priority | Notes |
|---|---|---|
| Enable Storefront API product/image read scope | 🔴 High | Blocks multi-image thumbnails on product pages — needs Shopify Admin → Develop apps → enable `unauthenticated_read_product_listings` + `unauthenticated_read_product_media` |
| Set up GitHub repo + Netlify auto-deploy | 🟡 Medium | User wants continuous deployment; requires manual repo creation + push (no push tool available here) + Netlify "Import from Git" linking |
| Newsletter backend | 🟡 Medium | Currently fake — needs Klaviyo/Mailchimp |
| Social media URLs | 🟡 Medium | All `href="#"` — user hasn't provided real links |
| Sale nav link | 🟡 Medium | No page |
| Collector Rewards page | 🟡 Medium | Footer link broken |
| Wholesale Enquiries page | 🟡 Medium | Footer link broken |
| New arrivals real images | 🟢 Low | 8 products use SVG placeholders |
| Individual category pages | 🟢 Low | All → scroll to #cats |
| Currency rates | 🟢 Low | Static snapshot — not live FX |
| Product data duplication | 🟢 Low | Product list is duplicated between `Brick Master Toys.html` and `product.html` — keep both in sync when editing products |